<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>vant-cnd</title>


		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" /> -->

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script> -->
        <link rel="stylesheet" href="../css/index.css">
        <!-- 引入 Vue 和 Vant 的 JS 文件 -->
        <script src="../../js/vue.js"></script>
        <script src="../../js/vant.min.js"></script>

	</head>
	<body>
		<div id="app">
			<div style="color: #C8C9CC;30px;line-height: 30px;">基础用法</div>
			<van-checkbox v-model="checked" style="width: 100px;">
				复选框
			</van-checkbox>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">禁用状态</div>
			<van-checkbox v-model="selected" disabled>复选框</van-checkbox>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">自定义形状</div>
			<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">自定义颜色</div>
			<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">自定义大小</div>
			<van-checkbox v-model="checked" icon-size="24px">复选框</van-checkbox>
			
			<!-- <div style="color: #C8C9CC;30px;line-height: 30px;">自定义图标</div>
			<van-checkbox v-model="checked">
			  自定义图标
			  <template #icon="props">
			    <img :src="props.checked ? activeIcon : inactiveIcon" />
			  </template>
			</van-checkbox> -->
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">禁用文本点击</div>
			<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">复选框组</div>
			<van-checkbox-group v-model="result">
			  <van-checkbox name="a">复选框 a</van-checkbox>
			  <van-checkbox name="b">复选框 b</van-checkbox>
			</van-checkbox-group>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">水平排列</div>
			<van-checkbox-group v-model="result" direction="horizontal">
			  <van-checkbox name="a">复选框 a</van-checkbox>
			  <van-checkbox name="b">复选框 b</van-checkbox>
			</van-checkbox-group>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">限制最大可选数</div>
			<van-checkbox-group v-model="result" :max="2">
			  <van-checkbox name="a">复选框 a</van-checkbox>
			  <van-checkbox name="b">复选框 b</van-checkbox>
			  <van-checkbox name="c">复选框 c</van-checkbox>
			</van-checkbox-group>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">全选与反选</div>
			<van-checkbox-group v-model="result" ref="checkboxGroup">
			  <van-checkbox name="a">复选框 a</van-checkbox>
			  <van-checkbox name="b">复选框 b</van-checkbox>
			  <van-checkbox name="c">复选框 c</van-checkbox>
			</van-checkbox-group>
			
			<van-button type="primary" @click="checkAll">全选</van-button>
			<van-button type="info" @click="toggleAll">反选</van-button>
			
			<div style="color: #C8C9CC;30px;line-height: 30px;">搭配单元格组件使用</div>
			<van-checkbox-group v-model="result">
			  <van-cell-group>
			    <van-cell
			      v-for="(item, index) in list"
			      clickable
			      :key="item"
			      :title="`复选框 ${item}`"
			      @click="toggle(index)"
			    >
			      <template #right-icon>
			        <van-checkbox :name="item" ref="checkboxes" />
			      </template>
			    </van-cell>
			  </van-cell-group>
			</van-checkbox-group>
		</div>
	</body>

	<script>
		// 在 #app 标签下渲染一个按钮组件
		new Vue({
			el: '#app',
			
			data: {
				checked: true,
				selected: false,
				activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
				inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
				result: ['a', 'b'],
			},
			
			methods: {
				checkAll() {
				      this.$refs.checkboxGroup.toggleAll(true);
				    },
				toggleAll() {
				      this.$refs.checkboxGroup.toggleAll();
				    },
			    toggle(index) {
			          this.$refs.checkboxes[index].toggle();
			        },
			},
			
			created() {
			
			},
			//template: '<van-button type="danger">默认按钮</van-button>'
			//template: `<van-cell title="单元格" value="内容" size="large" />`
		});
		// 调用函数组件，弹出一个 Toast
		//vant.Toast('提示');
	</script>


</html>
